<script>
import {defineComponent} from 'vue'
import store from "@/stores/store";
import NavHead from "@/components/common/nav-head.vue";
import Bottom from "@/components/common/bottom.vue";
import router from '../../router';

export default defineComponent({
  name: "main-show",
  components: {Bottom, NavHead},
  computed:{
    account(){
      return store.getters.getAccount
    },
    to_account_page(){
        router.push('/account')
    }
  },
  data(){
    return{
      store
    }
  },
  methods:{
    getProduct(category){
      this.$router.push({name:'product',query:{category:category}});
    }
  }
})
</script>

<template>
<div class="crumb">
  <div class="w">
    <div class="crumb-content">
      <a href="#" class="link">MyStore</a>
    </div>
  </div>
</div>

<div class="w panel">
  <div id="Welcome">
    <div id="WelcomeContent" v-if="store.account">
        Welcome {{ store.account.username }}
    </div>
</div>

  <div id="Main">
    <div id="Sidebar">
      <div id="SidebarContent">
        <a href="#" @click="getProduct('FISH')"><img src="../../assets/MainPage/image/fish_icon.gif"/></a>
        <br />
        Saltwater, Freshwater
        <br />
        <a href="#" @click="getProduct('DOGS')"><img src="../../assets/MainPage/image/dogs_icon.gif" /></a>
        <br />
        Various Breeds
        <br />
        <a href="#" @click="getProduct('CATS')"><img src="../../assets/MainPage/image/cats_icon.gif" /></a>
        <br />
        Various Breeds, Exotic Varieties
        <br />
        <a href="#" @click="getProduct('REPTILES')"><img src="../../assets/MainPage/image/reptiles_icon.gif" /></a>
        <br />
        Lizards, Turtles, Snakes
        <br />
        <a href="#" @click="getProduct('BIRDS')"><img src="../../assets/MainPage/image/birds_icon.gif"/></a>
        <br />
        Exotic Varieties
      </div>
    </div>

    <div id="inform" style="display: none"></div>


    <div id="MainImage">


      <div id="MainImageContent">

        <map name="estoremap" id="productShow">
          <area alt="Birds" coords="72,2,280,250"
                href="#" shape="RECT"
                data-categoryid="Birds" class="categoryItem"/>
          <area alt="Fish" coords="2,180,72,250"
                href="#" shape="RECT"
                data-categoryid="Fish" class="categoryItem"/>
          <area alt="Dogs" coords="60,250,130,320"
                href="#" shape="RECT"
                data-categoryid="Dogs" class="categoryItem"/>
          <area alt="Reptiles" coords="140,270,210,340"
                href="#" shape="RECT"
                data-categoryid="Reptiles" class="categoryItem"/>
          <area alt="Cats" coords="225,240,295,310"
                href="#" shape="RECT"
                data-categoryid="Cats" class="categoryItem"/>
          <area alt="Birds" coords="280,180,350,250"
                href="#" shape="RECT"
                data-categoryid="Birds" class="categoryItem"/>
        </map>
        <img height="355" src="../../assets/MainPage/image/splash.gif" align="middle"
             usemap="#estoremap" width="350" />
      </div>
    </div>

    <div id="Separator">&nbsp;</div>
  </div>
</div>
</template>

<style scoped>
@import "@/assets/MainPage/css/Main.css";
@import "@/assets/MainPage/css/cart.css";
@import "@/assets/MainPage/css/signOn.css";
</style>